<template>
	<div class="app">
		<!-- <el-button @click="set">click</el-button> -->
		<FlowGraphProvide>
			<StencilComponent class="stencil" />
			<div class="panel">
				<ToolBar v-if="isReady" />
				<GraphComponent class="flow-wrap" />
			</div>
			<div class="config-box">
				<ConfigPanel />
			</div>
		</FlowGraphProvide>
	</div>
</template>

<script lang="ts" setup>
import { hasOwn } from "@vue/shared";
import { ref, onMounted, type Component } from "vue";
import { FlowGraph, type InfoNodeData } from "@/utils/flow-graph";
import { ToolBar } from "./components";
import RRInfo from "./info/RRInfo.vue";
import type { CellView, Graph, Model } from "@antv/x6";

const isReady = ref(false);

let graph: Graph | undefined;

const { initGraph, GraphComponent, StencilComponent, FlowGraphProvide, ConfigPanel } =
	FlowGraph.create();

const componentMap: Record<string, Component> = { RR: RRInfo };

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const set = () => {
	if (!graph) return;
	const views = graph.getMountedViews() as Array<CellView>;
	for (const view of views) {
		if (view.isNodeView()) {
			const data = view.cell.getData();
			console.log(data.config.rr);
			// data.setComponent(componentMap[data.template]);
		}
	}
};

const initInfoNode = (graph: Graph) => {
	const views = graph.getMountedViews() as Array<CellView>;
	for (const view of views) {
		if (view.isNodeView()) {
			const data = view.cell.getData() as InfoNodeData;
			data.template &&
				hasOwn(componentMap, data.template) &&
				data.setComponent(componentMap[data.template]);
		}
	}
};

onMounted(() => {
	graph = initGraph();
	if (graph) {
		const data = localStorage.getItem("flow");
		data && graph.fromJSON(JSON.parse(data) as Model.FromJSONData);
		graph.centerContent();
		isReady.value = true;
		setTimeout(() => initInfoNode(graph!));
	}
});
</script>

<style lang="scss" scoped>
.app {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	.stencil {
		position: relative;
		width: 280px;
		height: 100%;
		border-right: 1px solid rgba(0, 0, 0, 0.08);
	}
	.panel {
		flex: 1;
		overflow: hidden;
		.flow-wrap {
			height: calc(100% - 40px);
		}
	}
	.config-box {
		color: #333;
		font-size: 14px;
		box-sizing: border-box;
		width: 290px;
		height: 100%;
		padding: 0 24px;
		border-left: 1px solid rgba(0, 0, 0, 0.08);
		overflow-y: auto;
	}
}
</style>
